<template>
  <div class="box">
      <div id="main"></div>
  </div>
</template>
<script>

export default {
    name: "EchartTest",
    methods:{
        drawChart(){
     let myChart = this.$echarts.init(document.getElementById("main"));
     let option = {
         title:{
             text:"练习vue中使用echarts"
         },
         tooltip:{},
         legend:{
             data:["销量"]
         },
         xAxis:{
             data:["香蕉","苹果","菠萝","橙子"]
         },
         yAxis:{},
         series:[{
             name:"销量2",
             type:"bar",
             data:[30,50,20,100]
         }]
     };
     myChart.setOption(option);
        }
   

    },
     mounted() {
      this.drawChart();
    }
}
</script>


<style>
#main {
    width: 600px;
    height:400px;
    margin: auto;
    margin-top: 100px
}
</style>